.tabs {
  position: relative;
  height: var(--g-tabs-height);
  overflow-y: hidden;
  white-space: nowrap;
  background: var(--g-tabs-bg);
  grid-area: 2 / 2 / 3 / 3;
  flex-shrink: 0;
  scrollbar-width: none;
}

.tab-list {
  display: flex;
  padding: calc((var(--g-tabs-height) - var(--g-tabs-item-height)) / 2) 16px;
}

.tab {
  position: relative;
  display: flex;
  height: var(--g-tabs-item-height);
  padding-right: 12px;
  padding-left: 12px;
  line-height: var(--g-tabs-item-height);
  white-space: nowrap;
  cursor: pointer;
  background: var(--g-tabs-item-bg);
  border-radius: 4px;
  user-select: none;
  align-items: center;

  + .tab {
    margin-left: 16px;
  }

  &-icon {
    position: relative;
    top: 1px;
    margin-right: 3px;
    font-size: var(--g-tabs-item-font-size);
    color: var(--g-tabs-item-color);
  }

  &-text {
    font-size: var(--g-tabs-item-font-size);
    color: var(--g-tabs-item-color);
  }

  &-close-icon {
    position: relative;
    z-index: 3;
    display: flex;
    width: 20px;
    height: 20px;
    margin-left: 4px;
    font-size: 14px;
    color: var(--g-tabs-item-color);
    cursor: pointer;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
  }

  &-drag-handle {
    position: absolute;
    inset: 0;
    z-index: 2;
  }

  &:hover {
    background: var(--g-tabs-item-hover-bg);

    .tab-icon {
      color: var(--g-tabs-item-hover-color);
    }

    .tab-text {
      color: var(--g-tabs-item-hover-color);
    }

    .tab-close-icon {
      color: var(--g-tabs-item-hover-color);
    }
  }

  &.active {
    background: var(--g-tabs-item-active-bg);

    .tab-icon {
      color: var(--g-tabs-item-active-color);
    }

    .tab-text {
      color: var(--g-tabs-item-active-color);
    }

    .tab-close-icon {
      color: var(--g-tabs-item-active-color);
    }
  }
}

.tab-ghost {
  opacity: 0 !important;
}
